<template>
  <span>
    <!-- {{ widget }} : {{ node.meta.type }}. -->
    <template v-if="Widgets[widget]">
      <component
        :is="Widgets[widget]"
        v-model="value2"
        :node="node"
        :formInfo="formInfo"
        @change="onChange"
      >
      </component>
    </template>

    <template v-else>
      <div>=odoo field todo</div>
      <div>{{ widget }}</div>
      <div>{{ node.nodename }}</div>
      <div>{{ node }}</div>
    </template>
  </span>
</template>

<script setup>
import WString from './WString.vue'
import WNumber from './WNumber.vue'
import WBoolean from './WBoolean.vue'
import WDatetime from './WDatetime.vue'
import WDate from './WDate.vue'
import WSelection from './WSelection.vue'

import WMany2one from './WMany2one.vue'
import WOne2many from './WOne2many.vue'
import WMany2many from './WMany2many.vue'

import WMany2manyTags from './WMany2manyTags.vue'

import WRadio from './WRadio.vue'
import WImageUrl from './WImageUrl.vue'
import WImage from './WImage.vue'

import WColorPicker from './WColorPicker.vue'
import WBooleanToggle from './WBooleanToggle.vue'

import WBadge from './WBadge.vue'

import WidgetTodo from './WidgetTodo.vue'

const Widgets = {
  char: WString,
  html: WString,
  text: WString,

  url: WString,
  phone: WString,
  email: WString,
  section_and_note_text: WString,

  integer: WNumber,
  float: WNumber,
  monetary: WNumber,
  handle: WNumber,

  boolean: WBoolean,

  date: WDate,
  datetime: WDatetime,

  boolean_toggle: WBooleanToggle,
  selection: WSelection,
  priority: WSelection,
  account_type_selection: WSelection,
  timezone_mismatch: WSelection,

  many2one_avatar_user: WMany2one,
  res_partner_many2one: WMany2one,
  many2one_barcode: WMany2one,
  sol_product_many2one: WMany2one,
  many2one_avatar_employee: WMany2one,
  many2one: WMany2one,

  autosave_many2many_tags: WMany2manyTags,
  many2many_tags: WMany2manyTags,
  many2many: WMany2many,
  section_and_note_one2many: WOne2many,
  one2many: WOne2many,

  badge: WBadge,
  image: WImage,
  image_url: WImageUrl,
  radio: WRadio,
  color_picker: WColorPicker,

  open_move_widget: WString,
  remaining_days: WidgetTodo,

  analytic_distribution: WidgetTodo,
  'account-tax-totals-field': WidgetTodo,
  payment: WidgetTodo,
  stock_rescheduling_popover: WidgetTodo,
  forecast_widget: WidgetTodo,
  work_permit_upload: WidgetTodo
}

import { computed } from 'vue'

const props = defineProps(['modelValue', 'node', 'formInfo'])
const emit = defineEmits(['update:modelValue', 'change'])

const value2 = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const widget = computed(() => {
  const meta = props.node.meta
  const widget_raw = props.node.widget

  if (widget_raw && widget_raw !== 'statinfo') {
    return widget_raw
    // } else if (['char', 'html', 'text'].includes(meta.type)) {
    //   return 'string'
    // } else if (['integer', 'float', 'monetary'].includes(meta.type)) {
    //   return 'number'
  } else {
    return meta.type
  }
})

function onChange(fname, value) {
  // console.log('onChange  ', fname, value)
  emit('change', fname, value)
}
</script>

<style scoped></style>
